<template>
  <div class="view">
    <x-header :left-options="{backText: ''}" class="vux-1px-b">添加新账户</x-header>
    <div class="card">
      <p>开户行<input type="text" id="admintel" v-model="form.bank_name"/><i class="rightss"></i></p>
    </div>
    <div class="cardnum">
      <p>银行账号<input type="text" class="name" v-model="form.account_number"/><i class="rightss"></i></p>
    </div>
    <div class="adminname">
      <p>持卡人姓名<input type="text" class="name" v-model="form.account_name"/><i class="rightss"></i></p>
    </div>
    <button @click="submit">确定</button>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import {SubmitPaymentAccount} from '@api'

export default {
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      form: {
        user_type: 2
      }
    }
  },
  methods: {
    async submit () {
      if (!this.form.bank_name || this.form.bank_name.length === 0) {
        return this.$toastText('请先输入开户行名称！')
      }
      if (!this.form.account_number || this.form.account_number.length === 0) {
        return this.$toastText('请先输入银行卡账号！')
      }
      if (!this.form.account_name || this.form.account_name.length === 0) {
        return this.$toastText('请先输入持卡人姓名！')
      }
      // 添加用户银行卡收款账户
      let res = await SubmitPaymentAccount(this.form)
      if (res.code === 200) {
        this.$toastText(res.msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .view {
    .card {
      padding-left: .125rem;
      width: 100%;
      margin-top: .25rem;
      line-height: .75rem;
      background: rgba(255, 255, 255, 1);

      p {
        font-size: .35rem;

        #admintel {
          width: 60%;
          height: .75rem;
          background: rgba(255, 255, 255, 1);
          border: 0;
          padding-left: .1875rem;
          color: gray;
        }

      }
    }
  }

  .cardnum {
    width: 100%;
    line-height: .75rem;
    margin-top: .25rem;
    background: rgba(255, 255, 255, 1);

    p {
      padding-left: .125rem;
      font-size: .35rem;

      .name {
        width: 60%;
        height: .75rem;
        background: rgba(255, 255, 255, 1);
        border: 0;
        padding-left: .225rem;
        color: gray;
      }

    }
  }

  .adminname {
    width: 100%;
    line-height: .75rem;
    margin-top: .25rem;
    background: rgba(255, 255, 255, 1);

    p {
      padding-left: .125rem;
      font-size: .35rem;

      .name {
        width: 60%;
        height: .75rem;
        background: rgba(255, 255, 255, 1);
        border: 0;
        padding-left: .1875rem;
        color: gray;
      }

    }
  }

  button {
    text-align: center;
    width: 100%;
    height: 1.225rem;
    position: fixed;
    left: 0;
    bottom: 0;
    border: 0;
    color: #fff;
    background: #ff0036;
  }
</style>
